<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工单号" name="filterRole" class="me-2">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="销售单号" name="filterRole" class="me-2">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料编码/物料" name="filterRole" class="me-2">
    <d-button id="primaryBtn" style="margin-left: 8px" (click)="search()"><i
        class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" style="margin-left: 8px" (click)="reset()"><i
        class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div class="mt-3">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
      [maxHeight]="tableheight" [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
      [resizeable]="true">
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell [fixedLeft]="colOption.fixedLeft" *ngFor="let colOption of dataTableOptions.columns"
            [title]="colOption.header">{{colOption.header}}
          </th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr dTableRow>
            <td dTableCell [attr.colspan]="5" class="job" [rowItem]="rowItem" [fixedLeft]="'0px'">
              <div class="procduct-job" (click)="toggleRowItem(rowItem,rowIndex)">
                <div class="icon ">
                  <span class="icon icon-chevron-right" [class.rotated]="rowItem.display"></span>
                </div>
                <div class="product-job-r">
                  <div class="jobNum">
                    <span>工单号：{{rowItem.jobNum}}</span>
                  </div>
                  <div *ngIf="rowItem.saleOrderNum">
                    <span>销售订单号：{{rowItem.saleOrderNum}}</span>
                  </div>
                  <div *ngIf="!rowItem.saleOrderNum">
                    <span>销售订单号：未与销售关联</span>
                  </div>
                  <div>
                    <span>计划生产数量：{{rowItem.productionQuantity}}</span>
                  </div>
                  <div class="productNum">
                    <span>产品编码：{{rowItem.productNum}}</span>
                  </div>
                  <div>
                    <span>产品名称：{{rowItem.productName}}</span>
                  </div>
                  <div>
                    <span>计划开始时间：{{rowItem.jobOrderPlanStartDate | date:'yyyy-MM-dd'}}</span>
                  </div>
                  <div>
                    <span>计划结束时间：{{rowItem.jobOrderPlanEndDate | date:'yyyy-MM-dd'}}</span>
                  </div>
                </div>
              </div>
            </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
            <td dTableCell> </td>
          </tr>
          <ng-container *ngIf="rowItem.display">
            <tr *ngFor="let item of rowItem.jobOrderProcesses ; let index = index;">
              <td dTableCell [rowItem]="item" [fixedLeft]="'0px'">
                <span>{{item.processNumber}}</span>
              </td>
              <td dTableCell [rowItem]="rowItem" [fixedLeft]="'200px'">
                <span (click)="selectPart(item)"><a class="devui-link">{{item.processNum}}</a> </span>
              </td>
              <td dTableCell>
                <span>{{item.processName}}</span>
              </td>
              <td dTableCell>
                <span>状态</span>
              </td>
              <td dTableCell>
                <span>人员</span>
              </td>
              <td dTableCell>
                <d-progress [percentage]="(item.reportedAmount/item.productionQuantity)*100">
                  <ng-template [dPosition]="'center'">
                    <div class="overflow-ellipsis" [title]="item.reportedAmount+'/'+ item.productionQuantity">{{
                      item.reportedAmount }}/{{item.productionQuantity}}</div>
                  </ng-template>
                </d-progress>
              </td>
              <td dTableCell>
                <span>{{item.reportedAmount}}</span>
              </td>
              <td dTableCell *ngIf="item.isOutsourcing">
                <span><d-tag [tag]=" '委外' " [labelStyle]="'false'"></d-tag></span>
              </td>
              <td dTableCell *ngIf="!item.isOutsourcing">
                <span><d-tag [tag]=" '自制' " [labelStyle]="'true'"></d-tag></span>
              </td>
              <td dTableCell>
                <span><d-tag [tag]=" item.isFirstInspection | YesOrNo"></d-tag></span>
              </td>
              <td dTableCell>
                <span><d-tag [tag]=" item.isEndInspection | YesOrNo"></d-tag></span>
              </td>
              <td dTableCell>
                <span>{{item.planStartTime | date:'yyyy-MM-dd'}}</span>
              </td>
              <td dTableCell>
                <span>{{item.actualStartTime | date:'yyyy-MM-dd'}}</span>
              </td>
              <td dTableCell>
                <span>{{item.planFinishTime | date:'yyyy-MM-dd'}}</span>
              </td>
              <td dTableCell>
                <span>{{item.actualFinishTime | date:'yyyy-MM-dd'}}</span>
              </td>
            </tr>
          </ng-container>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">

    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
      [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
